<template>
  <div>
    <div class="article-list">
      <!-- 老师的适配 -->
    <!-- <div class="article-list" :style="{height:sreenHeight}"> -->
      <van-pull-refresh
        :success-text="refreshSuccessText"
        :success-duration="2000"
        v-model="isRefreshLoading"
        @refresh="onRefresh"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="你爹我是有底线的！"
          @load="onLoad"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
        >
          <!-- <van-cell
            v-for="(article, index) in list"
            :key="index"
            :title="article.title"
          /> -->
          <ArticleItem v-for="(article,index) in list" :article='article' :key="index">

          </ArticleItem>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { getArticles } from '@/api/article.js'
import ArticleItem from '@/components/article-item'
export default {
  name: 'ArticleList',
  components: {
    ArticleItem
  },
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      list: [], // 存储列表数据的数组
      // 请求数据的时候加载的状态
      loading: false, // 控制加载中 loading 状态
      finished: false, // 控制数据加载结束的状态
      timestamp: null, // 请求获取下一页数据的时间戳
      error: false, // 控制列表加载失败的提示状态
      isRefreshLoading: false,
      refreshSuccessText: '',
      sreenHeight: ''
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    // this.sreenHeight =
    //   window.sreenHeight -document.querySelector(".van-nav-bar__content").offsetHeight -document.querySelector(".van-tabs__wrap").offsetHeight -document.querySelector(".layout-tabbar").offsetHeight +
    //   "px";
  },
  methods: {
    // 初始化或滚动到底部的时候会触发调用 onLoad
    // 列表滚动加载事件
    async onLoad () {
      //   1.异步请求数据
      try {
        const { data } = await getArticles({
          channel_id: this.channel.id,
          timestamp: this.timestamp || +new Date(),
          with_top: 1
        })

        // 测试网络异常时的error的状态
        // if(Math.random()>0.5){
        //     JSON.parse('dsnajndjsa')
        // }

        console.log(data)
        // 2.数据添加到list(是追加到list不是覆盖)
        const { results } = data.data
        this.list.push(...results)
        // 可以用尽量不要用，性能降低！
        // this.list=[...this.list,...data.data.results]
        // 3.关闭加载状态
        this.loading = false
        // 4.如果数据全部加载完成记的finished变成true
        // 因为最后一页的数据data.data.pre_timestamp是null,所以可以拿这个字段进行判断是否为最后一页
        if (results.length) {
          // 如果还有数据，被保存下一次要请求的时间戳
          this.timestamp = data.data.pre_timestamp
        } else {
          this.finished = true
        }
      } catch (err) {
        // this.$toast("请求失败稍后重试！"+err);
        // 捕获异常的同时记的关闭加载状态
        // 展示错误提示状态
        this.error = true
        // 请求失败了，loading也需要关闭
        this.loading = false
      }

      //   console.log("onLoad");
      // 1. 请求获取数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      //   setTimeout(() => {
      // 2. 把请求结果数据放到 list 数组中
      // 把数据添加到list
      // for (let i = 0; i < 10; i++) {
      //   this.list.push(this.list.length + 1)
      // }

      // 3. 本次数据加载结束之后要把加载状态设置为结束
      //     loading 关闭以后才能触发下一次的加载更多
      // this.loading = false

      // 4. 判断数据是否全部加载完成
      // if (this.list.length >= 40) {
      // 如果没有数据了，把 finished 设置为 true，之后不再触发加载更多
      //   this.finished = true
      // }
      //   }, 1000)
    },
    // 下拉刷新事件
    async onRefresh () {
      try {
        // 1.发送请求拿到数据
        const { data } = await getArticles({
          channel_id: this.channel.id,
          // 注意：每次下拉刷新都希望拿到最新的数据，所以需要传递最新的毫秒数
          timestamp: +new Date(),
          with_top: 1
        })

        // 测试网络异常时的error的状态
        // if(Math.random()>0.5){
        // JSON.parse('dsnajndjsa')
        // }
        // 2.将数据添加到list中
        const { results } = data.data
        this.list.unshift(...results)
        // this.list=[new Set(...this.list)] 老师说这个不行去重
        // 补充数组去重
        var arr = []
        var dataArr = []
        this.list.forEach((item) => {
          if (arr.indexOf(item.art_id === -1)) {
            arr.push(item.art_id)
            dataArr.push(item)
          }
        })
        // 3.关闭loading的状态
        this.isRefreshLoading = false
        // 4.更新刷新成功提示文案
        this.refreshSuccessText = `刷新成功了,更新了${results.length}条数据`
      } catch (err) {
        // console.log("请求失败",err);
        // 1.先关闭loading状态
        this.isRefreshLoading = false
        // 2.更新失败的文案
        this.refreshSuccessText = '刷新失败,这***，就很尴尬'
      }
    }
  }
}
</script>
<style lang='less'>
.home-container {
  padding-bottom: 100px;
}
.article-list {
  // 百分比相当于父元素
  // height: 100%;
  overflow-y: auto;
  height: 79vh;
}
</style>
